<template>
    <div class="qr-code">
        <module-bord @closeModule="$emit('closeCode')" ref="moduleBord">
            <h2 class="code-title text-center" v-if="rqCodeContent.title">{{rqCodeContent.title}}</h2>
            <div class="code-title text-center" v-if="rqCodeContent.description">{{rqCodeContent.description}}</div>
            <div v-if="rqCodeContent && Object.keys(rqCodeContent).length > 0">
                <div v-if="rqCodeContent.imgType == 'img' && rqCodeContent.image" class="code-wrap positionR text-center">
                    <img class="static-code" :src="rqCodeContent.image" alt="">
                    <img class="center-img positionAbCenter" v-if="rqCodeContent.conterImg" :src="rqCodeContent.conterImg" alt="">
                    <img style="position: absolute;left: 0;top: 0;" class="width-height-full"
                         src="../../../assets/images/common/bg_transparent.png"/>
                </div>
                <div class="code-wrap positionR text-center" v-else-if="rqCodeContent.imgType == 'rqcode'">
                    <div class="static-code positionRLCT" id ="codeImgBox" >
                    </div>
                    <img class="center-img positionAbCenter" v-if="rqCodeContent.conterImg" :src="rqCodeContent.conterImg" alt="">
                    <img style="position: absolute;left: 0;top: 0;" class="width-height-full"
                         src="../../../assets/images/common/bg_transparent.png"/>
                </div>
                <!--<img class="img-responsive store_code_img1" src="../../../assets/images/store-double.png"/>-->
                <div class="spell-join-code-wrap text-center" v-if="rqCodeContent.topText || rqCodeContent.bottomText">
                    <div class="spell-join-code">
                        <span class="spell-code-p" v-if="rqCodeContent.topText" v-html="rqCodeContent.topText"></span><br/>
                        <span class="spell-code-p" v-if="rqCodeContent.bottomText" v-html="rqCodeContent.bottomText"></span><br/>
                    </div>
                </div>
                <div class="displayFlex copy-text-wrap" v-if="false">
                    <span class="code-name flex1">好看好玩官网</span>
                    <span class="copy-text" @click="clickCopy('好看好玩官网')">复制地址</span>
                </div>
                <div class="copy-text-wrap">
                    <div class="displayFlex copy-adress" v-if="rqCodeContent.copyContent.pTitle1 || rqCodeContent.copyContent.p1Content">
                        <span v-if="rqCodeContent.copyContent.pTitle1">{{rqCodeContent.copyContent.pTitle1}}：</span>
                        <p  class="static-p1 flex1" v-if="rqCodeContent.copyContent.p1Content">{{rqCodeContent.copyContent.p1Content}}</p>
                    </div>
                    <div class="displayFlex flex-wrap copy-adress"  v-if="rqCodeContent.copyContent.pTitle2 || rqCodeContent.copyContent.p2Content">
                        <span v-if="rqCodeContent.copyContent.pTitle2">{{rqCodeContent.copyContent.pTitle2}}：</span>
                        <p class="static-p1 flex1" v-if="rqCodeContent.copyContent.p2Content">
                            {{rqCodeContent.copyContent.p2Content}}
                            <br />
                        </p>
                        <div class="width-full copy-wbtn" v-if="rqCodeContent.copyContent.text">
                            <span class="copy-btn" @click="clickCopy()">
                                {{rqCodeContent.copyContent.text}}
                            </span>
                            <span id="copyContent" style="position:absolute;opacity: 0;z-index: -1;">{{rqCodeContent.copyContent.p2Content}}</span>
                        </div>
                    </div>
                </div>
                <div class="btn-top-text" v-if="rqCodeContent.btnTopText">
                    {{rqCodeContent.btnTopText}}
                </div>
                <div class="bottom text-center" v-if="rqCodeContent.btn" >
                    <span class="rq-btn" v-html="rqCodeContent.btn" @click="$emit('navagation')">
                    </span>
                </div>
            </div>
        </module-bord>
    </div>
</template>

<script>
    import  QRCode from 'qrcodejs2'
    export default {
        name: "staticImgAlert",
        props:{
            rqCodeContentProp:Object,
        },
        data(){
            return{
                rqCodeContent:{
                    code:{
                        img:'',
                        url:'',
                        width: 160,
                        height: 160,
                    },
                    imgType:'img',//rqcode
                    text:'',
                    conterImg:'',
                    title:'',
                    url:'',
                    image:'',
                    topText:'',
                    bottomText:'',
                    description:'',
                    copyContent:{
                        // pTitle1:'好看好玩官网',
                        // p1Content:'好看好玩官网好看好玩官网好看好玩官网好看好玩官网好看好玩官网好看好玩官网',
                        // pTitle2:'好看好玩官网',
                        // p2Content:'好看好玩官网好看好玩官网好看好玩官网好看好玩官网好看好玩官网好看好玩官网',
                        // text:'复制地址',
                    },
                    btnTopText:'',
                    btn:'',
                },
            }
        },
        mounted(){
            this.rqCodeContent = Object.assign({},this.rqCodeContent,this.rqCodeContentProp)
            this.init();
        },
        methods:{
            init(){
                if(this.rqCodeContent.imgType == 'rqcode' && this.rqCodeContent.code && this.rqCodeContent.code.url){
                    setTimeout(()=>{
                        this.rqCode()
                    },300)
                }
            },
            rqCode(){
                let that = this;
                new QRCode('codeImgBox',{
                    render: "div",
                    correctLevel: 0,
                    width: that.rqCodeContent.code.width,
                    height: that.rqCodeContent.code.height,
                    text:that.rqCodeContent.code.url,
                    // src: 'https://sale888.cn/act/circle/9eor?actType=1&actCircleId=1010&identityType=3&identityKey=1600&inviteType=2&storeId=2506&from=singlemessage&isappinstalled=0&userId=10024&loginThirdId=84'
                })
            },
            clickCopy() {
                const range = document.createRange();
                range.selectNode(document.getElementById('copyContent'));
                const selection = window.getSelection();
                if(selection.rangeCount > 0) selection.removeAllRanges();
                selection.addRange(range);
                document.execCommand('copy');
                this.$root.$emit('toast', {msg: '复制成功',showTime:1000});
            },
        },
        components:{
            'module-bord': () => import('./ModuleBord'),
        },
        watch:{
            rqCodeContentProp(val){
                this.rqCodeContent = Object.assign({},this.rqCodeContent,val);
            }
        }
    }
</script>

<style scoped>
    .width-height-full{
        width: 100%;
        height: 100%;
    }
    .static-code{
        width: 160px;
        height: 160px;

    }
    .qr-code /deep/ .module-bord-content {
        width: 2.8rem;
        background-color: #fff;
        border-radius: .1rem;
        padding: .3rem .15rem .3rem;
    }
    .rq-code{
        z-index: 100;
        width: 40px;
        height: 40px;
    }
    .code-title{
        padding-bottom: .2rem;
    }
    .code-name{
        margin-right: .1rem;
        text-align: center;
        height: .27rem;
        line-height: .27rem;
        border: 1px solid #333;
        -webkit-border-radius: .1rem;
        -moz-border-radius: .1rem;
        border-radius: .1rem;
    }
    .copy-text{
        color: #fff;
        text-align: center;
        background-color: #5e99db;
        height: .3rem;
        width: .85rem;
        line-height: .3rem;
        border-radius: .05rem;
    }
    .copy-text-wrap{
        position: relative;
        z-index: 10;
    }
    .rq-btn{
        display: inline-block;
        text-align: center;
        background-color: #FDD909;
        border-radius: .25rem;
        width: 2.4rem;
        line-height: .44rem;
        height: .44rem;
        margin-top: .28rem;
    }
    .center-img{
        width: 34px;
        height: 34px;
        border-radius: .05rem;
    }
    .copy-adress{
        padding-top: .1rem;
        line-height: .25rem;
    }
    .copy-btn{
        padding: .02rem .1rem;
        -webkit-border-radius: .25rem;
        -moz-border-radius: .25rem;
        border-radius: .25rem;
        border: 1px solid #5D89E8;
        color: #5D89E8;
        font-size: .11rem;
    }
    .copy-wbtn{
        padding-top: .05rem;
        padding-left: 1rem;
    }
    .spell-join-code{
        padding-top: .05rem;
    }
    .btn-top-text{
        text-align: center;
    }
</style>
<style>
    .toast-wrap{
        z-index: 1070!important;
    }
</style>